<template>
	<div class="system-edit-brand-container">
		<el-dialog :title="(ruleForm.id!==0?'修改':'添加')+'品牌'" v-model="isShowDialog" width="769px">
			<el-form ref="formRef" :model="ruleForm" size="default" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="品牌名称" prop="name">
							<el-input v-model="ruleForm.name" placeholder="请输入品牌名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="首写字母">
							<el-input v-model="ruleForm.first_letter" placeholder="请输入首写字母" clearable></el-input>
						</el-form-item>
					</el-col>

          <el-col :xs="24" :sm="20" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="Logo">
              <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
            <el-dialog :visible.sync="logoVisible">
              <img width="100%" :src="ruleForm.logo" alt="">
            </el-dialog>
          </el-col>
<!--					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
<!--						<el-form-item label="手机号">-->
<!--							<el-input v-model="ruleForm.phone" placeholder="请输入手机号" clearable></el-input>-->
<!--						</el-form-item>-->
<!--					</el-col>-->
<!--					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">-->
<!--						<el-form-item label="邮箱">-->
<!--							<el-input v-model="ruleForm.email" placeholder="请输入" clearable></el-input>-->
<!--						</el-form-item>-->
<!--					</el-col>-->
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="排序">
							<el-input-number v-model="ruleForm.sort" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="部门状态">
							<el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0" inline-prompt active-text="启" inactive-text="禁"></el-switch>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.id!==0?'修 改':'添 加'}}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import {reactive, toRefs, defineComponent, getCurrentInstance,ref,unref} from 'vue';
import { saveDept, getDeptAll, getDeptList} from "/@/api/system/dept";
import {ElMessage} from "element-plus";

// 定义接口来定义对象的类型
interface TableDataRow {
	name: string;
	id: number;
  parentId:number;
	children?: TableDataRow[];
}
interface RuleFormState {
  id:number;
	name: string;
  first_letter:string;
  sort: number;
  status: number;
  factory_status:number;
  logo: string;
  big_pic:string;
}
interface DeptSate {
	isShowDialog: boolean;
  logoVisible:boolean;
	ruleForm: RuleFormState;
}

export default defineComponent({
	name: 'shopEditBrand',
	setup(prop,{emit}) {
    const {proxy} = getCurrentInstance() as any;
    const formRef = ref<HTMLElement | null>(null);
		const state = reactive<DeptSate>({
			isShowDialog: false,
      logoVisible:false,
			ruleForm: {
        id:0,
				name: '', // 品牌名称
        first_letter:'',
        sort:99,
        status: 1,
        factory_status:0,
        logo:'',
        big_pic:'',
			},
		});
		// 打开弹窗
		const openDialog = (row?: any) => {
      // resetForm()
      state.ruleForm = row
			state.isShowDialog = true;
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = () => {
      const formWrap = unref(formRef) as any;
      if (!formWrap) return;
      formWrap.validate((valid: boolean) => {
        if (valid) {
          if(state.ruleForm.id===0){
            //添加
            saveDept(state.ruleForm).then(()=>{
              ElMessage.success('角色添加成功');
              closeDialog(); // 关闭弹窗
              emit('deptList')
            });
          }else{
            //修改
            saveDept(state.ruleForm).then(()=>{
              ElMessage.success('角色修改成功');
              closeDialog(); // 关闭弹窗
              emit('deptList')
            });
          }
        }
      });
		};

    const handleRemove = (file?: any,fileList?:any) => {
      console.log(file, fileList);
    }

    const handlePictureCardPreview = (file?:any) => {
      state.ruleForm.logo = file.url;
      state.logoVisible = true;
    }
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
      handlePictureCardPreview,
      handleRemove,
      formRef,
			...toRefs(state),
		};
	},
});
</script>
